<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .big{
            background-color: #acacac;
        }
        .top {
            width: 100vw;
            height: 8vh;
            background-color: #ff8a00;
            display: flex;
        }
        .top>div{
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
        }
        .top>div:nth-of-type(1)>img{
            width: 150px;
        }
        .top>div:nth-of-type(2)>img{
            width: 35px;
            margin-left: 25px;
        }
        .sou{
            width: 100vw;
            height: 40vh;
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            background-image: url('./banner.png');
            background-size: 100% 100%;
        }
        .sou>input{
            width:75vw;
            height: 5vh;
            border-radius: .5rem;
            border: .15rem solid black;
            margin-bottom:0.5rem;
            padding-left: 2.5rem;
        }
        .sou>img{
            width: 8vw;
            height: 4vh;
            left: 1.5rem;
            bottom: 0.7rem ;
           position: absolute;
        }
        .mai{
            width: 100vw;
            display: flex;
            background-color: #ff8a00;
        }
        .mai>div{
            text-align: center;
            color: white;
            font-size: .8rem;
            margin: .45rem;
        }
        .mai>div>img{
            width: 20vw;
        }
        .guang{
            width: 100vw;
            height: 40vh;
            background-image: url('./banner2.png');
            background-size: 100% 100%;
        }
        .hot{
            width: 92vw;
            padding: 0.3rem  0 0.3rem 1.5rem ;
            color: white;
            background-color: #ff8a00;
        }
        .hot>p{
            font-weight: bold;
            font-size: 1.1rem;
        }
        .hot>span{
            font-weight: bold;
            font-size: .7rem;
        }
        .fang{
            width: 100vw;
            background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .fang1{
            width: 90vw;
            height: 25vh;
            display: flex;
            align-items: center;
            border-bottom: 2px solid red ;
        }
        .fang1>div:nth-of-type(1){
            flex: 1;
        }
        .fang1>div:nth-of-type(1)>img{
            width: 100%;
        }
        .fang1>div:nth-of-type(2){
            flex: 2;
            background-color: aliceblue;
            padding-left: .8rem;
        }
        .fang1>div:nth-of-type(2)>p{
            font-weight: bold;
            line-height: 2rem;
            font-size: 1rem;
        }
        .fang1>div:nth-of-type(2)>span{
            font-size: .8rem;
            line-height: 1.5rem;
        }
        .fang1>div:nth-of-type(2)>span:nth-of-type(2){
            float: right;
            color: #ff8a00;
        }
        .fang1>div:nth-of-type(2)>span:nth-of-type(3){
            color: #716f6f;
        }
        .fang1>div:nth-of-type(2)>span:nth-of-type(4){
            color: #716f6f;
            float: right;
        }
        .fang1>div:nth-of-type(2)>span:nth-of-type(5){
           padding: 2px;
           color:#4f616e ;
           background-color: #bde0f8;
        }
        .fang1>div:nth-of-type(2)>span:nth-of-type(6){
           background-color: #bde0f8;
           color:#4f616e ;
           padding: 2px;
           margin-left: 15px;
        }
        .fang1:nth-of-type(3){
            border-bottom: none;
        }
        .guan{
            width: 100vw;
            background-color: white;
            margin-top: 15px;
        }
        .guan>div:nth-of-type(1){
            border-bottom: 2px solid #ff8a00;
            display: flex;
        }
        .guan>div:nth-of-type(1)>span{
            flex: 1;
            font-size: 1.3rem;
            text-align: center;
            line-height: 3rem;
        }
        .guan>div:nth-of-type(1)>span:nth-of-type(1){
            border-bottom: 4px solid #ff8a00;
            color:#ff8a00 ;
        }
        .guan>div:nth-of-type(2){
            display: flex;
        }
        .guan>div:nth-of-type(2)>ul{
            margin-top: .8rem;
            flex: 1;
            margin-left: 1rem;
        }
        .guan>div:nth-of-type(2)>ul>li{
            font-size: .8rem;
            height: 1.7rem;
        }
        .bottom1{
            width: 100vw;
            background-color: #2f3130;
            color: #737373;
        }
        .bottom1>div:nth-of-type(1){
            width: 90vw;
            margin: auto;
            border-bottom: 1px solid #737373;
        }
        .bottom1>div:nth-of-type(1)>span{
            line-height: 2.5rem;
        }
        .bottom1>div:nth-of-type(2){
            height: 15vh;
            display: flex;
            align-items: center;
        }
        .bottom1>div:nth-of-type(2)>div{
            flex: 1;
            margin-left: 1rem;
            display: flex;
        }
        .bottom1>div:nth-of-type(2)>div>div:nth-of-type(2){
            margin-left: 1.1rem;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="top">
            <div>
                <img src="./logo.jpg" alt="">
            </div>
            <div>
                <img src="./my.jpg" alt="">
                <img src="./xiazai.jpg" alt="">
            </div>
        </div>
        <div class="sou">
            <img src="./seach.jpg" alt="">
            <input type="text" placeholder="输入小区或商圈名开始找房！">
        </div>
        <div class="mai">
            <div>
                <img src="./index_03.png" alt=""><br>
                <span>二手车</span>
            </div>
            <div>
                <img src="./index_05.png" alt=""><br>
                <span>新房</span>
            </div>
            <div>
                <img src="./index_07.png" alt=""><br>
                <span>房租</span>
            </div>
            <div>
                <img src="./index_09.png" alt=""><br>
                <span>卖房</span>
            </div>
        </div>
        <div class="guang">
        </div>
        <div class="hot">
            <p>热门房源</p>
            <span>Hot&nbsp;house</span>
        </div>
        <div class="fang">
            <div class="fang1">
                <div>
                    <img src="./img1.jpg" alt="">
                </div>
                <div>
                    <p>文化部中间层&nbsp;一层带...</p>
                    <span>2室1厅96m³南北</span><span>1105万</span><br>
                    <span>红庙北面</span><span>14268元/平</span><br>
                    <span>学区房</span><span>独家</span>
                </div>
            </div>
            <div class="fang1">
                <div>
                    <img src="./img2.png" alt="">
                </div>
                <div>
                    <p>光大水墨&nbsp;精装复式...</p>
                    <span>2室1厅96m³南北</span><span>280万</span><br>
                    <span>光大水墨</span><span>14268元/平</span><br>
                    <span>学区房</span><span>独家</span>
                </div>
            </div>
            <div class="fang1">
                <div>
                    <img src="./img3.png" alt="">
                </div>
                <div>
                    <p>南北通透两居&nbsp;精装修...</p>
                    <span>2室1厅96m³南北</span><span>320万</span><br>
                    <span>北京新天地</span><span>14268元/平</span><br>
                    <span>地铁房</span><span>独家</span>
                </div>
            </div>
        </div>
        <div class="guan">
            <div>
                <span>热门关注</span>
                <span>友情链接</span>
            </div>
            <div>
                <ul>
                    <li>北京二手房</li>
                    <li>北京二手房价</li>
                    <li>海淀日租房</li>
                    <li>朝阳新房</li>
                </ul>
                <ul>
                    <li>北京找房无忧</li>
                    <li>青年家园</li>
                    <li>免税房源</li>
                    <li>满五年唯一免税</li>
                </ul>
            </div>
        </div>
        <div class="bottom1">
            <div>
                <span>北京找房无忧 &nbsp; >  &nbsp; 首页</span>
            </div>
            <div>
                <div>
                    <div>
                        <img src="./apple.png" alt="">
                    </div>
                    <div>
                        <span>iPhone</span><br>
                        <span>客户端</span>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="./android.png" alt="">
                    </div>
                    <div>
                        <span>Android</span><br>
                        <span>客户端</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>